<template>
  <view class="word-block">
    <view class="word-single">
      <view class="pinyin">{{ convertToPinyin(title) }}</view>
      <view class="zh">{{ title }}</view>
    </view>
  </view>
</template>

<script setup>
import { pinyin } from 'pinyin-pro';

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
});

const convertToPinyin = () => {
  const isChinese = /^[\u4e00-\u9fa5]$/.test(props.title);
  if (!isChinese) {
    console.error('请输入中文', props.title);
  }
  // 转换为带声调的拼音
  const py = pinyin(props.title, { toneType: 'symbol' });
  return py;
};
</script>

<style lang="less" scoped>
.word-block {
  width: 100%;
  height: 70px;
  position: relative;
  top: -20px;
  display: flex;
  justify-content: center;
}

.word-single {
  background: url('images/sigle-bg.png') no-repeat;
  background-size: 51px 70px;
  width: 51px;
  height: 70px;

  .pinyin {
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'PingFang HK';
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #222222;
  }

  .zh {
    width: 100%;
    height: 50px;
    font-family: 'Toppan Bunkyu Midashi Mincho';
    font-weight: 900;
    font-size: 32px;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
